<template>
  <div class="box">
    <div class="main-left">
      <el-card class="card-query">
        <div class="text">查询条件</div>
        <el-form :model="form" ref="form" label-width="140px" class="form">
          <el-row>
            <el-col :span="6">
              <el-form-item prop="mainCourtyard" label="主体院：">
                <el-select v-model="form.mainCourtyard" placeholder="主体院">
                  <el-option label="市政总院" value="1" />
                  <el-option label="上海分院" value="2" />
                  <el-option label="徐汇分院" value="3" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="projectInfo" label="项目信息：">
                <el-input v-model="form.projectInfo" placeholder="项目信息">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="projectStatus" label="项目状态：">
                <el-select v-model="form.projectStatus" placeholder="项目状态">
                  <el-option label="未开始" value="1" />
                  <el-option label="已开始" value="2" />
                  <el-option label="已结束" value="3" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="projectArea" label="项目区域：">
                <el-select v-model="form.projectArea" placeholder="项目区域">
                  <el-option label="区域一" value="1" />
                  <el-option label="区域二" value="2" />
                  <el-option label="区域三" value="3" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item prop="mainCourtyard" label="客户：">
                <el-select v-model="form.mainCourtyard" placeholder="客户">
                  <el-option label="市政总院" value="1" />
                  <el-option label="上海分院" value="2" />
                  <el-option label="徐汇分院" value="3" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="managementStage" label="管理阶段：">
                <el-select
                  v-model="form.managementStage"
                  placeholder="管理阶段"
                >
                  <el-option label="待交付" value="1" />
                  <el-option label="交付中" value="2" />
                  <el-option label="已交付" value="3" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="managementMode" label="管理模式：">
                <el-select v-model="form.managementMode" placeholder="管理模式">
                  <el-option label="封闭式管理" value="1" />
                  <el-option label="开放式管理" value="2" />
                  <el-option label="半封闭管理" value="3" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="projectHealth" label="项目健康度：">
                <el-select
                  v-model="form.projectHealth"
                  placeholder="项目健康度"
                >
                  <el-option label="优" value="1" />
                  <el-option label="良" value="2" />
                  <el-option label="差" value="3" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6"><el-form-item></el-form-item></el-col>
            <el-col :span="6"><el-form-item></el-form-item></el-col>
            <el-col :span="6"><el-form-item></el-form-item></el-col>
            <el-col :span="6" style="text-align: right">
              <el-button type="primary" @click="searchAction(form)"
                >查询</el-button
              >
              <el-button type="info" @click="reset('form')">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card class="card-list">
        <div class="list-header">
          <div class="title">查询结果</div>
          <div class="add"><el-button type="primary">创建项目</el-button></div>
        </div>
        <div class="detail">
          项目<span class="count">14</span>项，合同金额<span class="count"
            >643,555</span
          >万元；其中上海项目<span class="count">9</span>项，沪外项目<span
            class="count"
            >5 </span
          >项；合同金额<span class="count">5500</span>万元；管理阶段中投标<span
            class="count"
            >2</span
          >个，中标<span class="count">1</span>个
        </div>
        <el-table
          stripe
          ref="multipleTable"
          :data="tableData"
          :highlight-current-row="true"
          @selection-change="handleSelectionChange"
          style="width: 100%"
        >
          <el-table-column
            align="center"
            prop="order"
            label="序号"
            type="index"
            :index="indexMethod"
          />

          <el-table-column align="center" prop="name" label="主体院" />
          <el-table-column align="center" prop="name" label="管理阶段" />
          <el-table-column align="center" prop="status" label="项目健康度">
            <template slot-scope="scope">
              <span class="health" :style="color(scope.row.status)">{{
                scope.row.status
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="age" label="项目编号">
            <template slot-scope="scope">
              <span
                style="
                  font-weight: 600;
                  color: #316dc3;
                  border-bottom: 1px solid #316dc3;
                "
                >{{ scope.row.count }}</span
              >
            </template>
          </el-table-column>
          <el-table-column align="center" prop="name" label="项目简称" />
          <el-table-column align="center" prop="status" label="项目状态" />
          <el-table-column align="center" prop="ip" label="项目管理代表" />
          <el-table-column align="center" prop="pirce" label="项目经理" />
          <el-table-column align="center" prop="ip" label="管理模式" />
          <el-table-column align="center" prop="count" label="项目区域" />
          <el-table-column align="center" prop="datatime" label="项目客户" />
        </el-table>
        <!--  分页-->
        <div class="pagingStyle">
          <el-pagination
            :pageSize="pageSize"
            :total="total"
            :pageNumber="pageNumber"
            background
            layout="prev, pager, next"
            @current-change="currentChange"
          />
        </div>
      </el-card>
    </div>

    <div :style="width" class="main-right">
      <el-card>
        <div class="porjectItems">最近操作项目清单</div>
        <template>
          <el-table
            class="rightTable"
            stripe
            ref="multipleTable"
            :data="tableData"
            :highlight-current-row="true"
            @selection-change="handleSelectionChange"
            style="width: 100%"
            :cell-style="cellStyle"
          >
            <el-table-column
              align="center"
              prop="index"
              type="index"
              label="序号"
              width="80"
              class="order"
            >
              <!-- <template scope="scope">
                <span :if="scope.row.orderNum" type="index" style="color: #28528D;font-weight:900;font-size:24px;"></span>
            </template> -->
            </el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="项目信息"
              style="cursor: pointer"
            >
              <template slot-scope="scope">
                <span
                  style="
                    font-weight: 600;
                    color: #316dc3;
                    border-bottom: 1px solid #316dc3;
                  "
                  >{{ scope.row.name }}</span
                >
                <div>{{ scope.row.word }}</div>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-card>
    </div>
  </div>
</template>

<script>
var nums = [2, 0, 1, 5, 13, 3];
var target = 8;

import { list } from "@/api/list";
export default {
  data() {
    return {
      mode: "",
      form: {},
      id: "",
      checkedData: [],
      tableData: [],
      pageNumber: 1, //第一页
      pageSize: 5, //默认显示20条
      total: 0,
      params: {},
      addForm: {},
      rightList: [{}],
      flag: true,
      width: "width:380px",
    };
  },
  async mounted() {
    this.getList();
    console.log(this.twoSum(nums, target));
  },
  methods: {
    twoSum(nums, target) {
      let mapObj = {};
      let res = [];
      nums.forEach((e, i) => {
        mapObj[e] = i;
      });
      for (let i = 0; i < nums.length; i++) {
        let j = mapObj[target - nums[i]];
        if (j && j !== i) {
          res = [i, j];
          break;
        }
      }

      return res;
    },
    getList() {
      list(this.params).then((res) => {
        // let tableData= res.data.list
        this.tableData = res.data.list;
        // this.total = data.page.total;
      });
    },
    cellStyle(row) {
      if (row.columnIndex == 0) {
        let style = "color:#28528D;font-weight: 700;font-size:32px;";
        return style;
      }
    },
    indexMethod(index) {
      return index + 1;
    },
    color(value) {
      let style;
      let origin = `font-size: 12px;
                  border-radius: 50%;
                  width: 24px;
                  height: 24px;
                  display: inline-block;
                  text-align: center;
                  line-height: 24px;`;
      let background, color;
      switch (value) {
        case 0:
          background = "background:#89C515;";
          color = "color:#696969;";
          style = background + color + origin;
          break;
        case 1:
        case 2:
        case 3:
          background = "background:#F5A623;";
          color = "color:#696969;";
          style = background + color + origin;
          break;
        case 4:
        case 5:
        case 6:
          background = "background:#E2503C;";
          color = "color:#fff;";
          style = background + color + origin;
          break;

        default:
      }
      return style;
    },
    sendStatusType(value) {
      let status;
      switch (value) {
        case 1:
          status = "goon";
          break;
        case 2:
          status = "success";
          break;
        case 3:
          status = "danger";
          break;
        default:
      }
      return status;
    },
    send_status(status) {
      let _status = "";
      if (status == 1) {
        _status = "发送";
      } else if (status == 2) {
        _status = "发送成功";
      } else {
        _status = "发送失败";
      }
      return _status;
    },
    device_type(type) {
      let _type = "";
      if (type == 1) {
        _type = "终端";
      } else if (type == 2) {
        _type = "服务器";
      } else {
        _type = "其他";
      }
      return _type;
    },
    operatingTime(date) {
      return this.$moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    handleSelectionChange(val) {
      this.checkedData = [];
      val.forEach((item) => {
        this.checkedData.push(item.id);
      });
      // this.multipleSelection = val;
    },
    reset(formName) {
      this.$refs[formName].resetFields();
    },
    currentChange(e) {
      this.pageNumber = e;
      this.initData();
    },
    searchAction() {
      if (this.form.sendStatus) {
        this.params.sendStatus = this.form.sendStatus;
      } else {
        this.$delete(this.form, "sendStatus");
      }
      this.pageNumber = 1;
      this.initData();
    },
    Info(msg) {
      this.$message({
        showClose: true,
        message: msg,
        type: "warning",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  display: flex;

  .main-left {
    position: relative;

    margin: 20px;
    flex: 1;

    .card-query {
      .text {
        height: 40px;
        line-height: 40px;
      }
    }
    .card-list {
      margin-top: 20px;
      .list-header {
        display: flex;
        margin-bottom: 10px;
        .title {
          height: 40px;
          line-height: 40px;
          flex: 1;
        }
        .add {
          margin-right: 20px;
        }
      }
      .detail {
        width: 100%;
        text-indent: 20px;
        font-size: 14px;
        line-height: 2;
        padding: 10px 0;
        border-top: 1px solid #e9e9e9;
        .count {
          color: red;
        }
      }
    }
  }

  .main-right {
    width: 380px;
    margin: 20px 20px 0 0;
    position: relative;
    //     .more {
    //       width: 10px;
    //       height: 30px;
    //       background: #28528d;
    //       position: absolute;
    //       left: 0;
    //       top: 30%;
    //   }
    /deep/ .el-table .cell {
      cursor: pointer;
    }
    .porjectItems {
      line-height: 2;
      margin-bottom: 10px;
    }
    .rightTable {
      .order {
        color: #28528d;
      }
    }
  }
}
/deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #f7f7f7;
  color: #606266;
  font-weight: 500;
}
/deep/.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  // border-bottom-color: #FFF;
  background: #fff;
}
/deep/.el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0;
}
/deep/.el-tabs__item.is-active {
  color: #28528d;
}
/deep/.el-tabs__item:hover {
  color: #28528d;
  cursor: pointer;
}

/deep/ .el-timeline-item__node--large {
  left: -8px;
  width: 26px;
  font-size: 16px;

  height: 26px;
}
/deep/.el-tabs__item {
  font-size: 12px !important;
}
/deep/.el-button + .el-button {
  margin-left: -2px;
}
/deep/ .el-step__title {
  font-size: 7px;
}
/deep/ .el-form-item__label {
  font-size: 7px;
  font-family: PingFang-SC-Heavy;
  color: #252525;
}
/deep/ .el-tabs--left .el-tabs__header.is-left {
  float: left;
  margin-bottom: 0;
  margin-right: 30px;
}
</style>